<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素节点的标签属性</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
    </style>
</head>
<body>
    <div class="box" title="C嘎嘎" username="luoli"></div>
    <script>
        let oBox = document.querySelectorAll(".box")[0]
        console.log(oBox.className,oBox.title,oBox.getAttribute("username"));
        
        //添加类名
        oBox.classList.add("wrap")
        oBox.classList.add("box1")
        //删除类名
        oBox.classList.remove("box1")
        //存在就删除类名，不存在就添加   适合用于开关
        oBox.classList.toggle("box2")
        /*
            js操作元素节点的标签属性：
                内置(合法标签属性)： 元素节点.属性名
                自定义标签属性： 元素节点.getAttribute("属性名")

                修改值：
                元素节点.属性名 = string --- ("xxx")
                设置标签属性：  setAttribute("属性名","")
                删除：  removeAttribute("属性名")
        */

        //批量设置样式属性
        //  oBox.style.cssText = ""

        //获取元素节点的所有css样式
        //getComputedStyle(元素节点)
        let objCssStyle = getComputedStyle(oBox)
        console.log(objCssStyle.width);
        
    </script>
</body>
</html>